<script type="text/javascript">
    function hoverup(id){
        document.getElementById(id).style.marginTop="4px";
        document.getElementById(id).src="images/menu-"+id+"-green.png";
    }
    function hoverdown(id){
        document.getElementById(id).style.marginTop="0px";
        document.getElementById(id).src="images/"+id+".png";
    }

</script>

<div id="menu" style="margin-left: 29px;">
    <div class="menu-item" style="">
        <div style="position: absolute; " onmouseover="hoverup('inicio');" onmouseout="hoverdown('inicio');">
            <a href="index.php"><img src="images/<?php if($menu=="index"){?>menu-inicio-green.png<?php }else{ ?>inicio.png<?php } ?>" id="inicio" width="88"/></a>
        </div>
    </div>
    <div class="menu-item">
        <div style="position: absolute; margin-left: 88px;" onmouseover="hoverup('local');" onmouseout="hoverdown('local')">
            <a href="local.php"><img src="images/<?php if($menu=="local"){?>menu-local-green.png<?php }else{ ?>local.png<?php } ?>" id="local" width="88"/></a>
        </div>
    </div>
    <div class="menu-item">
        <div style="position: absolute; margin-left: 176px;" onmouseover="hoverup('espectaculos');" onmouseout="hoverdown('espectaculos')">
            <a href="espectaculos.php"><img src="images/<?php if($menu=="espectaculos"){?>menu-espectaculos-green.png<?php }else{ ?>espectaculos.png<?php } ?>" id="espectaculos" width="88"/></a>
        </div>
    </div>
    <div class="menu-item">
        <div style="position: absolute; margin-left: 264px;" onmouseover="hoverup('cultura');" onmouseout="hoverdown('cultura')">
            <a href="cultura.php"><img src="images/<?php if($menu=="cultura"){?>menu-cultura-green.png<?php }else{ ?>cultura.png<?php } ?>" id="cultura" width="88"/></a>
        </div>
    </div>
    <div class="menu-item">
        <div style="position: absolute; margin-left: 352px;" onmouseover="hoverup('sociales');" onmouseout="hoverdown('sociales')">
            <a href="sociales.php"><img src="images/<?php if($menu=="sociales"){?>menu-sociales-green.png<?php }else{ ?>sociales.png<?php } ?>" id="sociales" width="88"/></a>
        </div>
    </div>
    <div class="menu-item">
        <div style="position: absolute; margin-left: 440px;" onmouseover="hoverup('deportes');" onmouseout="hoverdown('deportes')">
            <a href="deportes.php"><img src="images/<?php if($menu=="deportes"){?>menu-deportes-green.png<?php }else{ ?>deportes.png<?php } ?>" id="deportes" width="88"/></a>
        </div>
    </div>
    <div class="menu-item">
        <div style="position: absolute; margin-left: 528px;" onmouseover="hoverup('opinion');" onmouseout="hoverdown('opinion')">
            <a href="opinion.php"><img src="images/<?php if($menu=="opinion"){?>menu-opinion-green.png<?php }else{ ?>opinion.png<?php } ?>" id="opinion" width="88"/></a>
        </div>
    </div>
    <div class="menu-item">
        <div style="position: absolute; margin-left: 616px" onmouseover="hoverup('tecnologia');" onmouseout="hoverdown('tecnologia')">
            <a href="tecnologia.php"><img src="images/<?php if($menu=="tecnologia"){?>menu-tecnologia-green.png<?php }else{ ?>tecnologia.png<?php } ?>" id="tecnologia" width="88"/></a>
        </div>
    </div>
    <div class="menu-item">
        <div style="position: absolute; margin-left: 704px;" onmouseover="hoverup('politica');" onmouseout="hoverdown('politica')">
            <a href="politica.php"><img src="images/<?php if($menu=="politica"){?>menu-politica-green.png<?php }else{ ?>politica.png<?php } ?>" id="politica" width="88"/></a>
        </div>
    </div>
    <div class="menu-item">
        <div style="position: absolute; margin-left: 792px;" onmouseover="hoverup('economia');" onmouseout="hoverdown('economia')">
            <a href="economia.php"><img src="images/<?php if($menu=="economia"){?>menu-economia-green.png<?php }else{ ?>economia.png<?php } ?>" id="economia" width="88"/></a>
        </div>
    </div>
    <div class="menu-item">
        <div style="position: absolute; margin-left: 880px" onmouseover="hoverup('turismo');" onmouseout="hoverdown('turismo')">
            <a href="turismo.php"><img src="images/<?php if($menu=="turismo"){?>menu-turismo-green.png<?php }else{ ?>turismo.png<?php } ?>" id="turismo" width="88"/></a>
        </div>
    </div>
    <div class="menu-item">
        <div style="position: absolute; margin-left: 968px" onmouseover="hoverup('nacional');" onmouseout="hoverdown('nacional')">
            <a href="nacional.php"><img src="images/<?php if($menu=="nacional"){?>menu-nacional-green.png<?php }else{ ?>nacional.png<?php } ?>" id="nacional" width="88"/></a>
        </div>
    </div>
    <div class="menu-item">
        <div style="position: absolute; margin-left: 1056px" onmouseover="hoverup('internacional');" onmouseout="hoverdown('internacional')">
            <a href="internacional.php"><img src="images/<?php if($menu=="internacional"){?>menu-internacional-green.png<?php }else{ ?>internacional.png<?php } ?>" id="internacional" width="88"/></a>
        </div>
    </div>
</div>